<template>
    <div class="member_page">
      <el-row style="padding:10px">
        <el-button @click="handleAdd">新增部门</el-button>
      </el-row>
        <Table
          :need-operation-area="true"
          :pSize="pageSize"
          :tPage="total"
          :table-model="tableModel"
          :table-data="tableData"
          :currentPage="currentPage"
          :needRemove="false"
          :needEdit="true"
          tableEditText="编辑查看"
          @edit="handleEdit"
          @changePage="handleChangePage"
          @handleSizeChange="handleSizeChange"
        />
        <el-dialog :title="`${isAdd?'新增':'编辑查看'}部门信息`" :visible.sync="dialogTableVisible">
            <el-form label-position="left">
              <el-form-item label="部门名称">
              <el-input v-model="deptName"></el-input>
            </el-form-item>
            </el-form>
        <div class="btns">
            <el-button @click="handleSure" type="warning">确定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import Table from '@/components/table.vue'
import {addDept,getDept,editDept}  from '@/api'
export default {
  name:'memberList',
    components:{
        Table
    },
    data(){
        return{
          dialogTableVisible:false,
          tableModel: [
          { attribute: 'id', dontSort: true, type: 'normal', title: '部门ID' },
          { attribute: 'deptName', dontSort: true, type: 'normal', title: '部门名称' },
          { attribute: 'datetime', dontSort: true, type: 'normal', title: '更新日期' }
        ],
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
        deptName:'',
        isAdd:false,
        form:{}
        }
    },
    mounted(){
      this.initTableData()
    },
    methods:{
      handleAdd(){
        this.isAdd=true
        this.deptName=''
        this.dialogTableVisible=true
      },
      handleEdit(row){
        this.isAdd=false
        this.form=row
        this.deptName=row.deptName
        this.dialogTableVisible=true
      },
      handleSure(){
        if(!this.deptName){
          this.$message.error('请输入部门名称')
          return false
        }
        if(this.isAdd){
          addDept({deptName:this.deptName}).then(res=>{
            if(res.code==200){
              this.$message.success('新增成功！')
              this.initTableData()
              this.dialogTableVisible=false
            }
          })
        }else{
          editDept({...this.form,deptName:this.deptName}).then(res=>{
            if(res.code==200){
              this.$message.success('修改成功！')
              this.initTableData()
              this.dialogTableVisible=false
            }
          })
        }
      },
      initTableData(){
        getDept(this.currentPage).then(res=>{
          // console.log(res)
          if(res.code==200&&res.data){
            this.tableData=res.data
            this.total=res.msg
          }
        })
      },
        // 当前页
      handleChangePage(page) {
        this.currentPage = page
        this.initTableData()
      },
      // 每页显示多少
      handleSizeChange(limit) {
        this.pageSize = limit
        this.initTableData()
      }
    }
}
</script>
<style lang="less">
.member_page{
  padding: 10px;
  .user_box{
      width: 100%;
      .item{
          width: 100%;
          height: 50px;
          box-sizing: border-box;
          display: flex;
          border-bottom: 1px dashed #efefef;
          .label{
              width: 30%;
              line-height: 50px;
          }
          .value{
              width: 70%;
              line-height: 50px;
              text-align: right;
          }
      }
  }
}
  
</style>